$(function () {
    window.onload = function () {
        var $neiS = $('.section-nei');
        var $ul1Lis = $('.shiYong>.ul1>li');
        var $ul2Lis = $('.shiYong>.ul2>li');
        $.ajax({
            url: 'http://localhost:3000/useing/public',
            type: 'get',
            success: function (res) {
                var kong = [];
                var str = '';
                for (var i = 0; i < 12; i++) {
                    kong.push(res[i]);
                }
                $.each(kong, function (i, item) {
                    str += `
                 <li>
                    <p class="pp1">${item.info_ty}</p>
                    <img src="${item.img}">
                    <p class="pp2"><a href="./use-data.html">${item.text}</a></p>
                    <p class="pp3">
                        <span>${item.totalnum}</span>
                        <span>${item.num}台</span>
                    </p>
                    <p class="pp4"><span>${item.apply}</span>申请</p>
                    <p class="pp5">报告数量：8</p>
                </li>
                `;
                })
                $($neiS[0]).children('ul').html(str);
                $neiS.hide();
                $($neiS[0]).show();
            }
        })
        $.ajax({
            url: 'http://localhost:3000/useing/public',
            type: 'get',
            success: function (res) {
                var kong = [];
                var str = '';
                for (var i = 0; i < 12; i++) {
                    kong.push(res[i]);
                }
                $.each(kong, function (i, item) {
                    str += `
                    <li>
                    <p class="pp1">${item.info_ty}</p>
                    <img src="${item.img}">
                    <p class="pp2"><a href="./use-data.html">${item.text}</a></p>
                    <p class="pp3">
                        <span>${item.totalnum}</span>
                        <span>${item.num}台</span>
                    </p>
                    <p class="pp4"><span>${item.apply}</span>申请</p>
                    <p class="pp5">剩余天数2天</p>
                </li>
                    `;
                })
                $($neiS[1]).children('ul').html(str);
            }
        })
        $.ajax({
            url: 'http://localhost:3000/useing/public',
            type: 'get',
            success: function (res) {
                var kong = [];
                var str = '';
                for (var i = 0; i < 12; i++) {
                    kong.push(res[i]);
                }
                $.each(kong, function (i, item) {
                    str += `
                    <li>
                    <p class="pp1">${item.info_ty}</p>
                    <img src="${item.img}">
                    <p class="pp2"><a href="./use-data.html">${item.text}</a></p>
                    <p class="pp3">
                        <span>${item.totalnum}</span>
                        <span>${item.num}台</span>
                    </p>
                    <p class="pp4"><span>${item.apply}</span>申请</p>
                    <p class="pp5">剩余天数2天</p>
                </li>
                    `;
                })
                $($neiS[2]).children('ul').html(str);
            }
        })
        $.ajax({
            url: 'http://localhost:3000/useing/public',
            type: 'get',
            success: function (res) {
                var kong = [];
                var str = '';
                for (var i = 0; i < 12; i++) {
                    kong.push(res[i]);
                }
                $.each(kong, function (i, item) {
                    str += `
                 <li>
                    <p class="pp1">${item.info_ty}</p>
                    <img src="${item.img}">
                    <p class="pp2"><a href="./use-data.html">${item.text}</a></p>
                    <p class="pp3">
                        <span>${item.totalnum}</span>
                        <span>${item.num}台</span>
                    </p>
                    <p class="pp4"><span>${item.apply}</span>申请</p>
                    <p class="pp5">报告数量：8</p>
                </li>
                `;
                })
                $($neiS[3]).children('ul').html(str);
            }
        })
        $.ajax({
            url: 'http://localhost:3000/useing/master',
            type: 'get',
            success: function (res) {
                var str = '';
                $.each(res, function (i, item) {
                    str += `
                 <li>
                    <p class="pp1">体验师专享</p>
                    <img src="${item.img}">
                    <p class="pp2"><a href="./use-data.html">${item.text}</a></p>
                    <p class="pp3">
                        <span>${item.totalnum}</span>
                        <span>${item.num}台</span>
                    </p>
                    <p class="pp4"><span>${item.apply}</span>申请</p>
                    <p class="pp5">报告数量：8</p>
                </li>
                `;
                })
                $($neiS[4]).children('ul').html(str);
            }
        })
        $($ul1Lis[0]).click(function () {
            $ul2Lis.removeClass('hei');
            $($ul2Lis[0]).addClass('hei');
            $neiS.hide();
            $($neiS[0]).show();
            $ul1Lis.removeClass('huang');
            $(this).addClass('huang');
        })
        $($ul1Lis[1]).click(function () {
            $ul2Lis.removeClass('hei');
            $($ul2Lis[0]).addClass('hei');
            $neiS.hide();
            $($neiS[4]).show();
            $ul1Lis.removeClass('huang');
            $(this).addClass('huang');
        })
        $($ul2Lis[0]).click(function () {
            $neiS.hide();
            $($neiS[0]).show();
            $ul1Lis.removeClass('huang');
            $($ul1Lis[0]).addClass('huang');
            $ul2Lis.removeClass('hei');
            $(this).addClass('hei');
        })
        $($ul2Lis).click(function () {
            var xia = $(this).index();
            $neiS.hide();
            $($neiS[xia]).show();
            $ul1Lis.removeClass('huang')
            $($ul1Lis[0]).addClass('huang')
            $ul2Lis.removeClass('hei');
            $(this).addClass('hei');
        })
    }
})